<template>
  <div class="end-root">
  	<p class="server-end">服务结束</p>
  	<p class="server-time">共用时{{useTime.hour}}:{{useTime.minute}}:{{useTime.second}}，欢迎再次使用</p>
  	<div class="end-choose">
  		<button class="close" :class="{change: closeBol}" @touchend="close">知道了</button>
  		<button class="again" :class="{change: againBol}" @touchend="again">继续使用</button>
  	</div>
  </div>
</template>
  
<script>
  // import api from '@/api'

  export default {
    name: 'end',

    data () {
      return {
        closeBol: false,
        againBol: false,
        time: {},
        test: null,
        deviceId: ''
      }
    },

    computed: {
      useTime () {
        let result = {}
        result.hour = '00'
        result.minute = parseInt(this.time.second / 3600)
        console.log(result.minute)
        if (result.minute <= 9) {
          let minute = result.minute
          result.minute = '0' + minute.toString()
        }
        if (result.minute >= 60) {
        }
        let second = this.$route.params.time % 60
        if (second <= 9) {
          result.second = '0' + second
        } else {
          result.second = second
        }
        return result
      }
    },

    created () {
      this.time.second = this.$route.params.time * 60
      // if (this.time.second <= 9) {
      //   this.time.second = '0' + this.time.second
      // }
    },

    mounted () {
      this.deviceId = this.$route.params.id || '1'
    },

    methods: {
      close () {
        this.closeBol = true
        setTimeout(() => {
          this.closeBol = false
          this.$router.go(-1)
        }, 200)
        console.log(this.closeBol)
      },
      again () {
        console.log(2)
        this.$router.replace(`/pay/${this.deviceId}`)
      }
    }
  }
</script>

<style lang="stylus" scoped>
@import '~@/assets/style/default.styl'
.end-root
  width 100%
  height 100%
  background #fff
  overflow auto
  padding-bottom 1.4rem
  text-align center
  .server-end
    font-size 1rem
    color rgb(117,117,117)
    width 100%
    padding 20% 0
  .server-time
    font-size 0.5rem
    color rgb(43,43,43)
.end-choose
  width 100%
  padding-top 10%
  .close,.again
    width 50%
    height 1rem
    background rgba(0,204,51,1)
    border none
    display block
    margin 20% auto
    color #fff
    transition 0.2s
   .change
   background rgba(0,204,51,0.5)
   
  
</style>
